<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转木马</title>
	<style>
		*{margin: 0; padding: 0;}
		.container{
			width: 1000px;
			height: 1000px;
			border: 1px solid black;
			margin: 20px auto ;
			position: relative;
			transform-style: preserve-3d;
			perspective: 1000px;
			perspective-origin: 0% 0%;}
			.box{width: 200px;
				height: 200px;
				transform-style: preserve-3d;
				animation: myani 3s infinite;
				margin:100px auto 0; }
			.box div{
				font-size: 30px;
				text-align: center;
				line-height: 100px;
			   position: absolute;
				width: 100px;
				height: 100px;
				background: rgba(50,50,50,0.5);
			top:0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto auto;
			transform-style: preserve-3d;
			perspective: 200px;
			perspective-origin:50% 50%; 
		}
			@keyframes myani{
				0%{transform: rotateY(0deg);}
				100%{transform: rotateY(360deg);}
			}
			/*.d6{transform:translateZ(250px)}*/
			.d7{transform: rotateY(60deg) translateZ(250px);}
			.d8{transform: rotateY(120deg) translateZ(250px);}
			.d9{transform: rotateY(180deg) translateZ(250px);}
			.d10{transform: rotateY(240deg) translateZ(250px);}
			.d11{transform: rotateY(300deg) translateZ(250px);}
			.d12{transform: rotateY(360deg) translateZ(250px);}

	</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<!-- <div class="d6">box6</div> -->
		<div class="d7">box7</div>
		<div class="d8">box8</div>
		<div class="d9">box9</div>
		<div class="d10">box10</div>
		<div class="d11">box11</div>
		<div class="d12">box12</div>
		</div>
	</div>
</body>
</html>